자유게시판 페이지 구현#72
Conversation
…into feat/boards
…into feat/boards
Summary of ChangesHello @jungwon123, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 Pull Request는 자유게시판 기능을 웹 애플리케이션에 완벽하게 통합합니다. 사용자는 게시글을 쉽게 생성하고, 인기 게시글을 탐색하며, 검색 및 정렬 옵션을 통해 원하는 정보를 찾을 수 있습니다. 또한, 게시글 상세 페이지에서 좋아요를 누르거나 댓글을 작성하여 다른 사용자와 소통할 수 있습니다. 모든 기능은 React Query를 통해 효율적으로 데이터를 관리하며, 다양한 기기에서 일관된 사용자 경험을 제공하도록 반응형으로 설계되었습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
자유게시판 페이지 구현을 위한 전반적인 구조가 잘 잡혀 있습니다. Next.js App Router와 React Query를 활용하여 효율적인 데이터 관리와 페이지 전환을 구현하셨습니다. 다만, 컴포넌트 내에서 렌더링 도중 상태를 업데이트하는 패턴이나 접근성 측면에서 개선할 수 있는 부분들이 발견되었습니다. 특히 무한 스크롤 구현 시 다음 페이지 파라미터를 계산하는 로직의 안정성을 높이고, 이미지 태그 사용 시 Next.js의 최적화 기능을 활용하도록 권장합니다.
| if (user && user.id !== prevUserId) { | ||
| setPrevUserId(user.id); | ||
| setName(user.nickname); | ||
| setOriginalName(user.nickname); | ||
| setProfileImage(user.image); | ||
| } |
There was a problem hiding this comment.
컴포넌트 본문 내에서 조건부로 상태를 업데이트(setPrevUserId, setName 등)하는 것은 렌더링 루프를 유발할 위험이 있으며 React의 선언적 프로그래밍 모델에 어긋납니다. user 데이터가 변경될 때 폼을 초기화하려면 useEffect를 사용하는 것이 올바른 방법입니다.
There was a problem hiding this comment.
조건이 있어 1회만 실햘되어 렌더링 루프가 발생할 일이 없을겁니다.
| if (safePage !== currentPage) { | ||
| setCurrentPage(safePage); | ||
| } |
There was a problem hiding this comment.
렌더링 도중에 setCurrentPage를 호출하여 상태를 업데이트하는 것은 React에서 권장되지 않는 패턴입니다. 이는 불필요한 추가 렌더링을 유발할 수 있습니다. safePage를 직접 렌더링 로직에 사용하거나, visibleCount가 변경될 때 useEffect를 통해 업데이트하는 방식이 더 안정적입니다.
| width={32} | ||
| height={32} | ||
| className={styles.searchIcon} | ||
| onClick={handleSearchSubmit} |
There was a problem hiding this comment.
이미지 태그에 직접 onClick 이벤트를 부여하는 것은 키보드 접근성 측면에서 좋지 않습니다. 검색 버튼 역할을 한다면 button 태그로 감싸고 적절한 aria-label을 제공하는 것이 좋습니다.
<button type="button" className={styles.searchButton} onClick={handleSearchSubmit} aria-label="검색">
<Image
src={searchIcon}
alt=""
width={32}
height={32}
className={styles.searchIcon}
/>
</button>
| {article.content && <p className={styles.text}>{article.content}</p>} | ||
| {article.image && ( | ||
| <div className={styles.imageWrapper}> | ||
| <img src={article.image} alt="" className={styles.articleImage} /> |
There was a problem hiding this comment.
외부 이미지를 표시할 때도 Next.js의 Image 컴포넌트를 사용하는 것이 이미지 최적화 및 레이아웃 시프트 방지에 유리합니다. 도메인 설정이 필요할 수 있지만, 성능 최적화를 위해 변경을 권장합니다.
| <img src={article.image} alt="" className={styles.articleImage} /> | |
| <Image src={article.image} alt="" width={200} height={200} className={styles.articleImage} /> |
| getArticles({ page: pageParam, pageSize: PAGE_SIZE, orderBy, keyword: keyword || undefined }), | ||
| initialPageParam: 1, | ||
| getNextPageParam: (lastPage, allPages) => { | ||
| const loaded = allPages.length * PAGE_SIZE; |
There was a problem hiding this comment.
현재 로직은 모든 페이지가 정확히 PAGE_SIZE만큼의 아이템을 가지고 있다고 가정합니다. 만약 백엔드에서 예상보다 적은 아이템을 반환하는 예외 상황이 발생하면 다음 페이지 계산이 어긋날 수 있습니다. 실제 로드된 아이템의 총 개수를 기준으로 계산하는 것이 더 안전합니다.
| const loaded = allPages.length * PAGE_SIZE; | |
| const loaded = allPages.flatMap((page) => page.list).length; |
4 participants
Summary
자유게시판 페이지 구현
Issue